<template>
  <div>
    <!-- 可以利用a标签实现按钮带有提示功能 -->
    <a :title="title">
      <!-- 下面的这种写法，不能用: -->
      <!-- <el-button v-bind="$attrs"></el-button> -->
      <!-- v-on不能用@符号进行替换 -->
      <el-button v-bind="$attrs" v-on="$listeners">添加</el-button>
    </a>
  </div>
</template>

<script>
export default {
  name: "",
  props: ["title"],
  mounted() {
    //属于组件的一个属性
    //对于子组件而言，父组件给的数据可以利用props接受，但是需要注意，如果子组件通过props接受的属性，在$attrs属性当中是获取不到的
    //this.$attrs:可以获取到父亲传递的数据【props】
    //this.$attrs是可以获取父亲传递的props数据，如果子组件通过
    //props:[],接受，this.$attrs属性是获取不到的
    console.log("this.$attrs", this.$attrs);
    //$listeners,也是组件实例自身的一个属性，可以获取到父组件能给子组件传递自定义事件
    console.log("this.$listeners", this.$listeners);
  },
};
</script>

<style scoped></style>
